// 引入React
import React from "react"
// 设计Dom渲染包
import ReactDom from "react-dom"
// 创建标签、标签上面的属性(对象)、标签里面的内容
// const hello = React.createElement(
//   'h1',
//   {
//     title:'Hello React',
//   },
//   'Hello Word'
// )
// 原生写法
// const hello = React.createElement(
//   'div',.0
//   {className:'wrap'},
//    React.createElement(
//      'ul',
//      null,
//      React.createElement('li',null,'React'),
//      React.createElement('li',null,'Vue'),
//      React.createElement('li',null,'Angular')))
// JSX写法
// const hello = (
//   <div className='wrap'>
//     <ul>
//       <li>React</li>
//       <li>Vue</li>
//       <li>Angular</li>
//     </ul>
//   </div>
// )-
// 表达式的使用
//1.值表达式
const name = 'zs'
const age = 18
// 对象
const obj = {
  brand: '玛莎拉蒂',
}
// 数组
const arr = ['张三','李四']
// 方法
const show = () =>{
  return '玛卡巴卡'
}
const hello = (
 <div>
  <p>姓名：{name}</p>
  <p>年龄：{age}</p>
   {/* 对象不能直接作为表达式直接使用 */}
    {/* <p>{obj}</p> */}
  <p>对象：{obj.brand}</p>
  <p>数组：{arr[0]}</p>
  <p>数组：{arr}</p>
  <p>方法：{show()}</p>
 </div>
)
// 渲染谁，渲染到哪去
ReactDom.render(hello,document.querySelector('#react'))
